<!-- 体验成员 -->
<template>
  <div id="app">
    <div class="head">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/ExperienceMembers' }">成员管理</el-breadcrumb-item>
        <el-breadcrumb-item>体验成员</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span style="font-weight:600;">内测成员</span>
          <el-button>新增</el-button>
        </div>
        <div class="cardContent">
          <el-card shadow="hover">
            <div class="userCardContent">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <div class="userInfoContent">
                <span>小刘.</span>
                <span>liuyao1221</span>
              </div>
              <div class="buttonView">
                <el-button type="text">修改</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-card>
      <el-card shadow="never" style="margin-top:20px;">
        <div slot="header" class="clearfix">
          <span style="font-weight:600;">公测成员</span>
          <el-button>新增</el-button>
        </div>
        <div class="cardContent">
          <el-card shadow="hover">
            <div class="userCardContent">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              <div class="userInfoContent">
                <span>小刘.</span>
                <span>liuyao1221</span>
              </div>
              <div class="buttonView">
                <el-button type="text">修改</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-card>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  created() {
  },
  computed: {
  },
  methods: {
  },
}
</script>
<style scoped>
.el-card {
  border-radius: 20px;
}

.clearfix {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clearfix .el-button {
  float: right;
}

.cardContent .el-card {
  width: 20%;
}

.userCardContent {
  width: 100%;
  display: flex;
}

.userInfoContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 15px;
}

.userInfoContent span {
  text-align: left;
}

.userCardContent .buttonView {
  margin-left: 20px;
}
</style>
